<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>mydemo</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
        }

        #outer {
            width: 300px;
            margin: 10px auto;
            text-align: center;
            overflow: hidden;
            zoom: 1;
        }

        #outer div {
            float: left;
            width: 90px;
            height: 90px;
            background: black;
            margin: 15px 10px 15px 0;
            overflow: hidden;
            zoom: 1;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            /*获取盒子的数组*/
            var oDiv = document.getElementsByTagName("div");
            // alert(oDiv.index);
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function () {
                for (var i = 1; i < oDiv.length; i++) {
                    oDiv[i].style.background = "#8fbff5";
                }
            }
            oBtn.onblur = function () {
                for (var i = 1; i < oDiv.length; i++) {
                    oDiv[i].style.background = "";
                }
            }
        }
    </script>
</head>

<body>
    <div id="outer">
        <input type="button" id="btn" value="点击将div变成蓝色" /><br />
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

</html>